<template>
  <div class="pedestalList">
    <el-dialog title="栋座设置" class="pedestalList" :visible.sync="isDial" width="900px" :before-close='closeDialog'>
      <div class="addRow">
        <span style="float:left">栋座列表</span>
        <el-button type="primary" size="mini" style="float:right" @click="addPedestal('add')">添加栋座</el-button>
      </div>
      <el-table
        :data="gridData"
        border
        :span-method="objectSpanMethod"
        tooltip-effect="dark"
        max-height="550"
        size="mini" @selection-change="pedestalList" @select='singleBox'
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column property="pedestalName" label="栋座名" width="120">
          <template slot-scope="scope">
            <span class="red">{{scope.row.prefix+scope.row.name+scope.row.unit}}</span>
            <el-button type="text" size="small" @click="editPedestal(scope.row)">[修改]</el-button>
          </template>
        </el-table-column>
        <el-table-column property="unitNo" label="单元名" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.unitNo+'单元'}}</span>
          </template>
        </el-table-column>
        <el-table-column property="totalTier" label="总层数" width="80"></el-table-column> 
        <el-table-column property="stairsType" label="梯户" width="100"></el-table-column>
        <el-table-column property="roomNum" label="房号数" width="100">
          <template slot-scope="scope">
            <span>{{scope.row.totalNumbers?scope.row.totalNumbers:0}}</span>
            <el-button v-if="scope.row.totalNumbers>0" type="text" size="small" @click="seeRoom(scope.row)">[查看]</el-button>
            <!-- <el-button v-else type="text" size="small" @click="seeRoom(scope.row)">[查看]</el-button> -->
          </template>
        </el-table-column>
        <el-table-column property="name" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addUnit('edit',scope.row)">修改单元</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除单元</el-button>
            <el-button type="text" size="small" @click="clearRoom(scope.row)">清除房号</el-button>
          </template>
        </el-table-column>
        <el-table-column property="date" label width="80">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addUnit('add',scope.row)">添加单元</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="foot">
        <el-button type="primary" plain size="mini" style="float:left" @click="delPedestal">删除栋座</el-button>
        <el-button type="primary" size="mini" style="float:right" @click="createdRoom">生成房号</el-button>
      </div>
    </el-dialog>
    <addPedestal></addPedestal>
    <editPedestal></editPedestal>
    <add-unit></add-unit>
    <createdRoom></createdRoom>
    <seeRoom></seeRoom>
  </div>
</template>
<script>
import addPedestal from "./addPedestal.vue"; //添加栋座
import editPedestal from "./editPedestal.vue"; //修改栋座
import addUnit from "./addUnit.vue"; //添加单元
import createdRoom from "./createdRoom.vue"; //生成房号
import seeRoom from "./seeRoom.vue"; //查查看号
import { request } from "../../../assets/request.js";
export default {
  data() {
    return {
      gridData: [],
      isDial: false,
      housesId: "",
      spanArr:[],
      delList:[],
      delArr:[],
      unitList:'',
    };
  },
  created() {
    let that = this;
    this.$root.$on("pedestalList", data => {
      that.isDial = true;
      if(data){
        that.housesId = data.id;
      }
      that.selectList({ housesId: that.housesId });
    });
  },
  methods: {
    del(row) {
      //删除单元
      let that=this
      this.$confirm("此操作将永久删除该单元, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let url='houses/unit/'+row.id+'?greenToken='+request.greenToken
          request.ajaxDel({
            url,
            that,
            fn(res){
              that.$message({
                type: "success",
                message: "删除成功!"
              });
              that.selectList({ housesId: that.housesId });
            }
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    clearRoom(row) {
      //清除房号
      let that=this
      request.delAlert({
          name:'清除改房号',
          that,
          fn(obj){
              let url='houses/unit/list?greenToken='+request.greenToken+'&unitId='+row.id
              request.ajaxDel({
                url,
                that,
                fn(res){
                  that.$message(obj)
                  that.selectList({ housesId: that.housesId });
                }
              })
          }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      //合并单元格
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 7) {
            if(this.spanArr[rowIndex]){
                return {
                    rowspan:this.spanArr[rowIndex],
                    colspan:1
                }
            }else{
                return {
                    rowspan: 0,
                    colspan: 0
                }
            }
        }
    },
    addPedestal(type) {
      //添加栋座
      let id = this.housesId;
      this.$root.$emit("addPedestal", type, id);
    },
    editPedestal(row) {
      //修改栋座
      this.$root.$emit("editPedestal", "edit",row);
    },
    addUnit(type,data) {
      //添加单元和修改单元
      this.$root.$emit("addUnit",type,data);
    },
    createdRoom() {
      //生成房号
      let that=this
      var delList=this.delList
      if(delList.length<=0){
        this.$message({
          type: "info",
          message: "请先选择要生成的栋座"
        });
        return
      }
      console.log(delList)
      this.$root.$emit("createdRoo",delList,that.housesId);
    },
    seeRoom(row) {
      //查看房号
      console.log(row)
      this.$root.$emit("seeRoom",row);
    },
    pedestalList(val){  //多选框选中   全选和取消全选
      let gridData=this.gridData
      if(!val[0]){  //判断是否取消全选
        this.delList=val
        // console.log(val)
      }else if(val.length==gridData.length){ //判断是否全选
        for(var i = 0; i < val.length-1; i++){
          for(var j = i+1; j < val.length; j++){
            if(val[i].prefix==val[j].prefix && val[i].name==val[j].name){
              val.splice(j,1);
              j--
            }
          }
        }
        // console.log(val)
        this.delList=val
      }
    },
    singleBox(val,row){ //多选框选中   单个取消选中和选中
      let delList=this.delList
      let num=0
      if(val.length==this.gridData.length){ //判断多选框是否全部选中
        return
      }
      for(let i in delList){ //循环判断  选中数组列表  是否跟当前操作的相同
        if(delList[i].prefix==row.prefix && delList[i].name==row.name){ //取消选中操作
          num=1
          delList.splice(i,1);
        }
      }
      if(num==0){//如果此单元个是选中操作
        delList.push(row)
      }
    },
    getArrDifference(arr1, arr2) { //获取两个数组不同的项
        return arr1.concat(arr2).filter(function(v, i, arr) {
            return arr.indexOf(v) === arr.lastIndexOf(v);
        });
    },
    delPedestal(){
      //删除栋座
      let that=this
      var delList=this.delList
      //剔除重复的取消选中
      let gridData=this.gridData
      let conlist=this.getArrDifference(gridData,delList)
      if(delList.length<=0){
        this.$message({
          type: "info",
          message: "请先选择要删除的栋座"
        });
        return
      }
      request.delAlert({
          name:'删除选中栋座',
          that,
          fn(obj){
              let name=""
              for(let i=0,len=delList.length;i<len;i++){
                name+=delList[i].prefix+'-'+delList[i].name+'-'+delList[i].unit+','
              }
              name=name.substr(0,name.length-1);
              let url='houses/unit?housesId='+that.housesId+'&greenToken='+request.greenToken+'&names='+name
              request.ajaxDel({
                url,
                that,
                fn(res){
                  that.$message(obj)
                  that.selectList({ housesId: that.housesId });
                }
              })
          }
      })
    },
    selectList(obj) {
      //列表请求
      let url = "houses/unit";
      let that = this; //解决this指向问题
      request.ajaxGet({
        url,
        that,
        params: obj,
        fn(res) {
          if(res){
            var dataList = [];
            let arr=[]
            let contactDot = 0;
            // console.log(res)
            that.unitList=res
            for(let i=0,len=res.length;i<len;i++){ //将列表修改成表格合并的格式
              for(let j=0,leng=res[i].list.length;j<leng;j++){
                dataList.push(res[i].list[j])
                if(j=='0'){
                  arr.push(res[i].size)
                }else{
                  arr.push(0)
                }
              }
            }
            for (let i = 0, len = dataList.length; i < len; i++) {
              if (dataList[i].stairsType) {
                dataList[i].stairsType = dataList[i].stairsType.split("-");
                dataList[i].stairsType = dataList[i].stairsType[0] + "梯" + dataList[i].stairsType[1] + "户";
              }
            }
            that.spanArr=arr
            that.gridData = dataList;
          }else{
            that.gridData =[]
          }
        }
      });
    },
    closeDialog(){ //点击叉的时候
      this.isDial=false
      this.$root.$emit("refresh",'no')
    }
  },
  components: {
    addPedestal,
    editPedestal,
    addUnit,
    createdRoom,
    seeRoom
  }
};
</script>
<style lang="less" scoped>
.pedestalList {
  text-align: left;
  .el-dialog {
    text-align: left;
  }
  .el-dialog__header {
    text-align: left !important;
    .el-dialog__title {
      float: left;
    }
  }
  .addRow {
    margin-bottom: 10px;
    overflow: hidden;
    span {
      font-size: 16px;
      color: #000;
      font-weight: 500;
    }
  }
  .foot {
    overflow: hidden;
    padding: 20px 0px;
    margin-bottom: -30px;
    margin-top: 10px;
  }
}
</style>

